Este menú desplegable que traigo es muy vistoso para el blog, tiene una particularidad y es que podemos añadir nosotros mismos los botones de acuerdo a nuestros gustos o el color acorde con nuestro blog.En El blog de Cesar he encontrado uno igual que a su vez lo hizo con Aire como referencia.
La imagen que ilustra esta entrada es solo para que veáis el diseño. En la sidebar encontraréis el menú, os invito a probar para que veáis el efecto al clicar en él.
Podemos aplicarlo en unos sencillos pasos:
Lo primero que haremos será situarnos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:
<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
Después nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript y añadimos el código.
Os lo dejo tal y como lo tengo en mi sidebar omitiendo algunos enlaces para ahorraros el trabajo de eliminarlos.
<a href="javascript:void(0);" onclick="expandcollapse('Actualidad')">
<img border="0" src=" http://img183.imageshack.us/img183/6739/actualidadan5.gif"/>
</a><br/>
<ul id="Actualidad" class="texthidden">
<li><a href="http://www.20minutos.es/ " target="_blank"> 20 Minutos
</a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('Traductor')">
<img border="0"src="http://img186.imageshack.us/img186/4555/traductorhp5.gif"/>
</a><br/>
<ul id="Traductor" class="texthidden">
<li><a href="http://www.elmundo.es/traductor/" target="_blank"> El Mundo </a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('Enciclopedia')">
<img border="0" src="http://img186.imageshack.us/img186/9757/encicoplediabq3.gif"/>
</a><br/>
<ul id="Enciclopedia" class="texthidden">
<li><a href="http://es.wikipedia.org/wiki/Portada" target="_blank"> Wikipedia </a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('Conversor')">
<img border="0" src="http://img340.imageshack.us/img340/3786/conversorzi5.gif"/>
</a><br/>
<ul id="Conversor" class="texthidden">
<li><a href="http://chuano.net/chuano/util/convsimbolos.php" target="_blank"> Conversor HTML </a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('Ayuda blog')">
<img border="0" src="http://img208.imageshack.us/img208/940/buttonoq4.gif"/>
</a><br/>
<ul id="Ayuda blog" class="texthidden">
<li><a = _blank href="http://www.gemablog-.blogspot.com/">Gem@ BLOG </a></li></ul>
Vamos a conocer un poco el código.
Color rojo: El texto que habremos añadido al botón.
Color verde: Dirección Url de la imagen del botón.
Color naranja: Texto que aparece al desplegarse el botón.
Color azul: Dirección Url del enlace de la página enlazada.
(Lo que aparece en negro no lo modificaremos)
Color azul: Dirección Url del enlace de la página enlazada.
(Lo que aparece en negro no lo modificaremos)
Es fácil crear unos botones, una página muy sencilla es http://www.buttonator.com/
Al igual que Cesar yo lo personalicé con una imagen chiquita que aparece en forma de flecha si os gusta podéis añadir una imagen añadiendo el código de imagen
<img src="aquí-la-url-de-tu-imagen"> justo antes del texto que aparece al desplegarse el botón (color naranja)
Y eso es todo, si tienes dudas házmelo saber
Y eso es todo, si tienes dudas házmelo saber
Hola Gem@ ! te envie el e-mail !! con el codigo ;)
Sabes como se puede hacer, para repetir este truco mas abajo !! el problema es que si hago el truco, por ejemplo, imaguinate!! donde tu tienes Enlazame, debajo, poner mas etiquetas de estas .
cuando lo hago se me desactiva las primeras :(
sabes como solucionarlo !! gracias
Hola Gem@:
Mientras soluciono lo de la plantilla voa y "intentar" poner un menú de estos a ver si se deja.
Solo una pregunta: Si quiero poner mas enlaces en un desplegable, que hago, copio este codigo varias veces?
< ul id="Ejemplo" class="texthidden" >
< li >< a = _blank href="http://www.ejemplo.blogspot.com/" >Ejemplo< /a >< /li >< ul >
No se si me explique bien pero imagino que es asi.
Un saludo de un desesperado con las plantillas,
JmpaSrgc
Hola gema!!!!
Te quiero comentar que he iniciado un nuevo proyecto que espero que os guste está basado en imágenes de distribución libre ya que están hechas por mi plantillaswebblog.blogspot.com
espero que disfruteis de las plantillas poco a poco iré añadiendo más!!!!
Se me olvidaba soy Carmen de todo para tu blog!!Un blog diferente.
Hola Mactrucos¡ he recibido el mail, hoy mismo lo verás en forma de post ;)
No sé si te he entendido bien, pero te refieres a aplicar dos menús despegable en diferente sitio de la sidebar y te desactivan las primeras?
Tengo que probarlo y ya te cuento si me pasa a mi también ;)
Hola JmpaSrgc me tienes tristecilla de ver que no solucionas el añdir una sidebar a tu blog, vamos a tener que ponernos a trabajar codo a codo hasta conseguirlo.
Estás en lo cierto esa parte de código es justo lo que hay que ir añadiendo, cerrando siempre con < ul >
Te explicas perfectamente ;)
No me has dicho que tal el enlace que te envié por mail, tampoco vale?
Hola Carmen de un blog diferente¡ son muy bonitas las plantillas muy parecidas a la Minima Lefty de Blogger, he intentado ver el código y la descarga es muy diferente a las que he visto, podrías explicar por qué para descargarla me redirige a mi página con los datos de Gmail? cuando tenga un poco claro lo de las descargas haré un post para dar a conocer tu proyecto ;)
Si Gem@, si vale lo que ocurre que a mi no me da el resultado que quiero y no entiendo el porqué.
un saludo,
JmpaSrgc
hola Gema, he puesto el menu en mi blog pero se me estropea el enlace a tu página. Puedes echarle un vistazo? Gracias. Un abrazo
Hola Silvia, hay un código que está sin cerrar, exactamente es justo al final donde dice Gem@ BLOG </a></li></ul> te falta el cierre de </ul> es decir la barra que hay dentro del código.
Hola gema; te explico por supuesto!!!! Es que he usado el servicio de google docs (es un servicio de google que se pueden editar textos en linea y compartir y hojas de cálculo) la dirección es http://docs.google.com/, si hay algún problema de acceso te estaría muy agradecida que me lo comentases.Imagino que te redirige a tu cuenta de google para saber si tienes el servicio y poder acceder a la plantilla que es un documento de txt alojado en este servicio.
Poco a poco iré incorporando otros formatos de blogger, es que voy a tope.
Un abrazo enorme!!!!Me alegra que te gustaran
Gracias Carmen, he leído sobre Google Docs pero aún no lo he experimentado.
Lo de ir a tope es generalizado por lo que veo ;)
¿Cómo vamos JmpaSrgc ?
Hola Gem@:
Esto va igual, osea, "na" de "na". La sidebar no consigo ponerla a la izquierda del mainbar ni por asomo.
Y sobre lo del menú... lo he dejado para cuando termine esta semana de locura en Sevilla... estamos en Feria!!! Jeje.
Un saludo,
JmpaSrgc
Y que viva el Rebujito!! :D
Siento no ver este comentario antes :(
Muchs gracias gem@ por el tiempo y trabajo que nos dedicas. Necesito saber si hay alguna forma de colocar el menú desplegable en horizontal en vez de en vertical.
Hola Rafa, claro que puede hacerse en horizontal, y lo tengo en un blog de pruebas, si lo deseas mañana doy salida a un post con la sexplicaciones :)
Hola Gema, usé el truco, pero tengo un problema, el menú no queda desplegado siempre y no se como arreglarlo.
Hola ABC no debe quedar desplegado, debe desplegarse al clicar sobre el botón.
Copia el código sin omitir nada, mira si al final cerraste con </li></ul>
Hola gema, ya pude arregla el otro problema, pero no se como agregar mas links, copie de nuevo el código, pero solo me muestra uno. no se si me explico.
Hola JmpaSrgc, soy Dario, a mí tb me costó montar la sidebar. Depende de la plantilla que utilices... creo.
Yo logré colocarla de la siguiente forma: Sigue las instrucciones de Gema -que son geniales-, pero busca los siguiente - o algo parecido, ...-
Donde gema te indica "/* Outer-Wrapper:", yo encontré: "#outer-wrapper". Hasta ahí más o menos casi igual.
Después, la siguiente indicación es buscar y modificar "#main-wrapper" y "#sidebar-wrapper".
Lo más parecido que encontré a esos códigos fueron: "div#main" y
"div#sidebar". Incluye las modificaciones que indica Gema en esos lugares. A mí me funcionó. Luego sólo tienes que jugar con el ancho de las columnas para ajustarlas y que se vea todo correcto.
Ya te digo, a mí me funcionó muy bien. Suerte.
Puedes ver mi blog en http://plumayteclado.blogspot.com
Ahí puedes ver como estaba antes y como me ha quedado después.
Gema, espero que no te importe que haya dado estas indicaciones en tu blog, pero he pensado que lo bueno de esto es aportar las experiencias de cada uno para ayudar, en lo que se pueda, a los demás. Que te voy a contar, es lo mismo que haces tú. Gracias de nuevo, eres genial.
Hola abc claro que te explicas, cada vez que deseas añadir un enlace en un mismo botón debes añadir a continuación del último enlace lo siguiente:
<li><a href="direccion de la pagina" target="_blank"> nombre a mostrar </a></li>
Eso hará que al clicar en un botón se despliegue y muestre los enlaces sobre el mismo tema.
-No olvides que el último código de abajo de cada botón debe cerrar con
</li></ul> de lo contrario no hará el efecto de recoger.
Me alegra que tengas esa opinión Darío, no solo no me molesta sino que es estupendo que cada uno aporte aquello que puede ser de ayuda basado en su experiencia.
Gracias ;)
HOla Gem@ he visto tu código me sirve y lo voy a utilizar pero qusiera cambiarle de aspecto al Menu mi blog es negro y oviamente lo quiero oscuro
Sabes como? SALUDOS DESDE COSTA RICA
Saludos OZ en el ejemplo he aplicado unos botones creados por mí pero hay varias páginas para crear botones, la que recomiendo en esta entrada es muy sencilla se trata de Buttonator
Puedes crear algo parecido a esto
Luego subes la imagen del botón a algún servidor por ejemplo http://www.imageshack.us/ y ña url que te genera la pones en lugar de la que yo puse en mi ejemplo.
Suerte¡
Gracias Gem@, oye otra de quiz, no se si sabes como hago que en el menu cuando clickeo en "videos comicos" por ejemplo me salgan desplegados solo las entradas con videos cómicos, se que esta relacionado con los tags y luego con con un searcho yo tengo el de google, pero de ahi en fuera no se el codigo ni donde ponerlo. Sabes?
El de la pregunta del search soy yo Oz es que se me paso lo del nick
Veamos Oz, el menú de esta entrada no tiene nada que ver con los tags, es un menú que muestra aquellos enlaces que previamente has añadido, si deseas que vayan apareciendo enlaces debes ir añadienlos manualmente.
Otra cosa es un menú tipo categorías, donde aplicas un menú con botones y cada vez que clicas en una categoría ejemplo ´´vídeos cómicos`` muestra todas las entradas asignadas a la categoría de vídeos cómicos.
En este último no debes hacer nada,bueno debes añadir unos códigos a la plantilla ya sea para menú horizontal como lo tengo yo o vertical para poner en la sidebar del blog (algo parecido al de esta entrada)
mmm... soy muy nuevo jeje, oye tu que sabes del tema me podrias decir si has puesto alguna entrada de menu por ctegorias ( ya lo busque en tu blog y no lo encontre) o refenciarme un blog o pag que tenga un buen codigo explicado asi como el tuyo de menu desplegable.!?
Ya no me respondas ya lo logre jeje
traveseando abajo de cada post le pongo el criterio de busqueda por ejemplo "video" osea una etiqueta.
Luego en el codigo donde tu pones href="javascript:void(0);" lo sustituyo por href="http://nombredelblog/search/label/video" rel="tag"
Y listo, espero le sirva a alguno
Buen aporte, lo pondré en práctica cuando tenga tiempo y lo comentaremos ;)
Hola Gema, por aquí de nuevo yo, pues te cuento que al fin de mucho probar, logre hacer la cajita que tanto me gusta, pero algo me salio mal, porque busque otro botones y el texto no me aparecía en ellos, o sea quedaba el botón sin texto, o sea que solo se pueden usar los botones de la pagina que diste tu aquí? no se porque no me salio bien, seguí al pie de la letra todas tus instrucciones, pero en eso me raje,no me salio el texto en el botón, lo demas funcionaba bien, se expandía y tal, pero el texto naaaa, que puedo hacer Gema?gracias por tu ayuda.
Gema te enviare un email con el código que hice para ver si asi me puedes decir donde esta el error, para que no me aparezcan los nombres en los botones, saludos y gracias.
El error no está en el código Didita puesto que tu misma dices que se despliega y tal...
Pienso que quizás no te diste cuenta cuando dije que "Es fácil crear unos botones, una página muy sencilla es http://www.buttonator.com/" los botones los creamos con el texto incluido, es decir si quieres un botón para Fondos deberás crear un botón que contenga el texto "Fondos" luego alojarlo en un servidor y después añadir esa url donde dice img border="0" src=" .....
Hola Gema, si si lei donde dijiste lo de crear los botones,lo que pasa pense que se podían colocar botones de otro lado y también iba a aparecer el titulo al pegar el código, pero ya veo que no jajaja, bueno gracias gema y los hare en la pagina que diste tu, por ciero gema queria preguntarte como se hace para colocar el marcador de tu pagina, ese corazoncito que tienes antes de url? y que además esta asi lindo en movimiento?gracias de antemano y disculpa tanta preguntadera jajaja.saludos
Ese corazoncito es un favicón Didita, puedes añadir una a tu blog desde aquí...
http://gemablog-.blogspot.com/2007/02/favicn-para-blogger-beta.html
Gracias Gema. ya lo consegui,cuando haya hecho la dichosa cajita ya te contare,jajaj,para que me des el visto bueno, saludosssss y gracias por tu ayuda.
Hola!! por favor mira necesito poner la barra en horizontal y me estoy quebrando la cabeza de no sabes que forma, porfavor a ver si me puedes decir como lo hago, muchas gracias wapa
HOLA GEMA UNA PREGUNTA EL IMAGESHACK QUE FUNCION TIENE ME PODRIAS EXPLICAR POR FAªªªª
Me alegra que todo vaya bien Didita ;)
Maniguetero ese menú despegable es en vertical, si deseas uno en horizontal (pero estático) mira aquí, le puse los colores más acordes con tu blog pero pueden modificarse.
http://gemablog-.blogspot.com/2007/08/men-horizontal.html
!Suerte¡
Estilo Libre Imageshack es un servicio de alojamiento para archivos en formato jpg jpeg png gif bmp tif tiff y desde hace poco también para swf o sea vídeos.
Nos proporciona la herrameinta para modificar el tamaño de las imágenes antes de subirlas, y una capacidad de 1.5 megabytes.
Esta es la dirección: Imageshack
Suerte y bienvenido :)
Hola gema
Tengo un problema con el truco del menú desplagable y por ello te envié a tu correo el código que estoy aplicando.
Espero tu ayuda,porque quiero que el menú funcione bien
Gema solo puedo poner los comentarios como feed,osea 5 y salen estáticos no puedo pinchar en ellos para hacer link...
ya me diras ok?
Besos
Gema solo puedo poner los comentarios como feed,osea 5 y salen estáticos no puedo pinchar en ellos para hacer link...
ya me diras ok?
Besos
SIB dime que tipo de sistema o código has utilizado ¿lo tengo yo en mi blog explicado?
Podría ser que fuera el script, yo alojo los archivos siempre en el mismos servidor pero hay personas que cambian de servidor y los archivos que tienen alojados dejan de tener validez por eso te lo pregunto.
Si pudieras indicarme con exactitud sería lo mejor.
Gabriel ya he visto tu mail voy a repasarlo y te lo envío de nuevo ;)
Gema,como te expliqué en un nuevo correo,he intentado poner más enlaces pero no aparecen en el blog.Te envié una parte del código.
Hola Gema, estoy aplicando este código para crear mi menú de categorías, como de momento no hay muchas entradas lo voy haciendo asi; solo quiero agradecer, y comentar que al principio me daba problemas el cierre de los links añadidos a mayores, es decir, no se me cerraban, y si añadia /ul al final, blogger me lo borraba, ya que no habia etiqueta inicial...lo resolvi borrando el /ul del primer link al final, y poniéndolo sólo al último. Lo añado pr si a pesar de tu excelente explicación, alguien se las está viendo cmo yo durante horas con esa tonteria... gracias de nuevo!
Hola Gabriel, he estado ausente pero ya he visto el último mail ya mismo me pongo manos a la obra y te contesto ;)
Vanessa, yo no he tenido problemas como el que mencionas, como verás en los comentarios son varios los menús aplicados, pero te agradezco mucho el comentario por si alguien más presenta el mismo problema. Muy amable de tu parte tomarte la molestia de comentarlo, así da gusto ;)
No me funca pero igual muy buena la pag.
este es mi problema: cambio el nombre de los links y entra a los viejos (tambien cambio la URL)
blog-pocho.blogspot.com
Lo que veo en tu blog Pocho es que lo que has añadido es el menú desplegable no este menú de la entrada.
De todas formas no entiendo eso que entras a los viejos si añades un texto y un enlace debes entrar al enlace que has añadido.
(Quizás si le añadieras un color al fondo se vería con más claridad)
Explícame un poco más el problema que tienes.
Hola Gema!
Soy nueva por aquí, he llegado a través de Oloblogger.
Me ha gustado mucho este menú, lo he hecho en mi página www.elisabeth-garcia.blogspot.com, pero no sé qué pasa que en el botón que tengo destinado a fotografías no se me despliegan todos los enlaces que tengo, sólo el primero.
Lo he hecho tal y cómo decías. Lo he puesto así:
< ul id="Fotografías" class="texthidden" >
< li >< a href="http://www.elisabetgarcia.com" target="_blank" >Paula Elvira< /a >< /li >< /ul >
< ul id="Fotografías" class="texthidden" >
< li >< a href="http://www.elisabetgarcia.com" target="_blank" >Cristina Morales< /a >< /li >< /ul >
Y así sucesivamente, pero nada, no me sale. Por cierto, no te fijes en las URL, que son todas la misma, era para hacer la prueba. No sé si podrías ayudarme, te estaría muy agradecida.
Ahh, otra cosa, yo quería poner ese menú, pero fuera de la caja dónde van las entradas, no sé si me explico. Yo tengo entradas y sidebar en el mismo espacio y querría que la sidebar se viera separada. Y no sé cómo hacerlo. Diría que no lo he visto por tu página, si es así, disculpa.
Bueno, desde ya muchas gracias, si no me he explicado bien o cualquier cosa, pregúntame.
Felicidades por la página. Saludos!
Hola Liz bienvenida :)
El código < /ul > sólo se añade una vez, prueba a añadir < /ul > sólo al final, es decir debe cerrar el código y quedar justo después del último código.
Por otra parte lo que puedes es separar el menú de las entradas con una línea.
Puedes ver aquí como hacerlo.
Puedes agregar una línea fina y aplicarle el color de las que tiene tu blog en los extremos, de esa forma la sidebar quedaría independiente de las entradas ;)
Gracias Gema!
Ya lo he solucionado. Y bueno, lo de separar la sidebar, al final lo he hecho con la línea, como explicabas en el post, porque no he encontrado en toda la web la manera que yo quería de hacerlo. Me gusta complicarme demasiado a mí ;)
Por cierto tampoco ha quedado mucho como yo quería porque cuando lo cuadraba todo para que el menú desplegable quedara centrado, al verlo por ejemplo con Firefox, no estaba igual y si lo cuadraba en Firefox, con Internet Explorer no se veía bien. Al final le he tenido que dejar más margen al lado derecho del menú desplegable para que se viera bien desde los dos navegadores. Sabes cómo podría arreglar eso?
Y perdona tanta pregunta porque seguro debo estar poniendo a prueba tu santa paciencia, jeje.
Hola gema tu menu funciona perfectamente. pero ahora quería proponerte una vuelta de tuerca más al gadjet, que a mi por alguna razón no me sale.
quería que el botón fuese animado como los que se crean en GRSites.com, no consigo que cambie, sale pero no queda animado ¿podrias ayudarme?. Gracias por adelantado, eres la mejor.
hola Gema, muy buen blog, y que manera tienes de ayudar los neobloggers (como yo). Tengo un blog (http://oficinadiscapacidad.blogspot.com) y me gustaria hacer el "Enlaza nuestro blog" como un menu desplegable. por favor enseñame... ALEXIS
La tahona y Liz siento la tardanza en contestar supongo que después de tantos días vuestras dudas ya estarán resueltas, lamento la espera.
Klgo. Alexis Moya R. creo que lo que buscas es algo así, puedes incluir cualquier contenido ya sea el botón de enlazar, el código o cualquier otra cosa.
Suerte ;)
Hola Gema, yo también he puesto el menú éste y además le he añadido cosas, y me funciona perfectamente, pero mi consulta es de estética:
Para mi gusto hay demásiada separación entre botones, de hecho, en el tuyo no tienen tanta separación.
He estado mirando como poder cambiarlo pero no le encuentro el sitio.
Si tiene solución te agredecería me lo dijeras.Gracias
Un Abrazo
Hola Luís, prueba a suprimir los códigos <br/> son saltos de línea.
Ya me dirás el resultado ;)
Funciona... no deja separación alguna , pero funciona.
Gracias.
Un saludo.
Hola de nuevo Luís prueba a añadir <p> al principio y </p> al final de cada párrafo.
Eso hará un espacio pequeño.
He probado, el primer espacio sale pequeño pero los otros salen grandes.
De todas formas no queda mal asi juntos asi que no te molestes.
Gracias
Estupendo entonces :)
Buenas gema ^^
me funciona y todo,pero luego al ver mi blog no me sale el menu....nose...que e echo mal?
Hola Cadyl el código de la plantilla está bien, pero el de elemento de página no he podido verlo, mándame a mi mail lo que añadiste y te digo donde está el error ;)
Gema hola hice el truco este me salio, voy bien pero !! cuando clikeo en el boton se desplega pero al clikear en la otra opcion se me abre una nueva ventana, como hago para q me pase a lo q quiero ver sin esa ventana nueva??
Te dejo la direccion si la quieres chusmear
http://soniajolie.blogspot.com/
Toda tus criticas seran bien recibidas , casi todo lo hice yo, soy novata no se mucho de esto Un Besote desde Belgica
hoolaa hola
sabes-...necesito ayuda....
te explico. quiero hacer que mi blog tenga un menú, pero
me gustaría que hubiese una imagen y que yo pueda apretar distintas zonas de esa foto... y me lleven a una parte de mi blog. por ejemmplo una foto de una persona, le apreto la cabeza y me lleva a una seccion, los brazos a otra... y asi.
creo q debe ser dificil pero si puedes ayudarme o contaactarme con alguien q pueda ayudarme
pero ojala por msn... o mail. bdroguett@yahoo.es
MUCHAS GRACIAS!
Hola Sonia esa nueva ventana la abre el atributo target="_blank puedes eliminar lo que te pongo como ejemplo en negrita:
<a href="hthttp://soniajolie.blogspot.com/search/label/Conservas/soniajolie.blogspot.com/search/label/Abanicos/" target="_blank"><img src="http://i34.tinypic.com/24zm5fr.jpg"/>conservas
</a>
Hola belén no he visto nada por el estilo, si me informo de algo te lo haré saber :)
Gracias gema muy amable si ahora anda ,Q te parecio el blog cual seria tu critica constructiva para hacerme , lo hice solita curiosenado por todos lados
y de nuevo Gracias eres Grandiosa
Hola Jolie3313 me parece estupendo que pongas a la práctica todos los medios que tienes a tu alcance, siempre digo que el blog dice mucho de la persona es como una carta de presentación.
Mi crítica sería que sigas en la línea de dar rienda suelta a tu imaginación, escribir pensando en ti y en las cosas que te gustan.
Me ha encantado esa exposición de bolillos :)
Bueno espero que ahora salga el comentario, no se que hago que los pierdo jajaja.
Te daba las gracias por el enlace que me pusiste para llegar a este menú que es lo que quiero poner en el blog, pero quería preguntarte si crees que puede darmen algún error ya que en alguna ocasión me has comentado que al no ser platilla de bloger quizas no funciona igual.
Y después, una pregunta de auténtica novata : Cuando dices ...JUSTO DESPUES DE HEAD, que significa? He estado buscandolo en la plantilla y no consigo encontrarlo.
Gracias de nuevo Gema.
Marga
Hola Marga el nuevo editor de comentarios falla con frecuencia :(
Sobre lo que dices de la plantilla es cierto, pero no me refería a scripst sino a ciertos códigos condicionales de la plantilla que al ser adaptadas no coinciden con las originales de Blogger.
Yo creo que no tendrás problemas, mira bien que los botones sean de la medida de la sidebar para que no la desplace es el problema que últimamente tenías al añadir gadgets ;)
Gracias Gema por tu rapidez!!
Ahora lo que necesito es que me respondas a lo de saber localizar HEAD, sino estoy perdida !!!!
Un beso enorme.
Marga
:S Me olvidé Marga...
La etiqueta <head> la tienes al principio de la plantilla, en la tercera línea creo que era ;)
Ya lo encontré Gemma, no pensé que estuviera tan al principio.
Y tendría que que añadir todo el cogio a continuación, sin ningún espacio ? o en la línea de abajo, justo antes de la < title > ....
Ays que miedo me da esto jajaja
Marga
Buenos días Gema, no hagas caso del mensaje anterior. Ya lo puse y de momento no ha pasado nada grave jejeje. Ahora estoy jugando con los botones. Ya te comento como queda.
Un beso
Marga
Hola Gema !!
Creo que me quedé sin blog ... estoy asustadísima.
Verás, queriendo hacer lo del desplegable, no se que me ha pasado que he borrado una serie de entradas. Cuando quiero restaurar la plantilla (tenía hecha una copia, uf, menos mal) me dice que no puede porque hay más de un artilugio con el id html 14.
Eso que significa ???
Gracias Gema, espero que tenga arreglo.
Un beso
Marga
Lo tiene Marga. Cuando añadimos una plantilla Blogger la añade sobre la que teníamos y conserva los gadgets de la anterior es decir los repite.
Lo que debes hacer es lo siguiente cada vez que te dice que un artilugio está repetido lo que hacemos es buscar ese artilugio y cambiarle el número un ejemplo si te lo dice con el 14 le añades una cifra por ejemplo un 0 (cero) sería 140.
Te lo pedirá varias veces eso es porque no podemos tener dos id iguales cada id debe ser única para ser reconocida (algo así como el D.N.I :)
Otra cosa que puedes hacer es eliminar la línea entera de ese artilugio repetido y guardar la plantilla.
Esto último es ir guardando de uno e nuno no sé por qué pero a i no me deja eliminarlos todos los repetidos a la vez ;)
Hola Gema, ya consegui restablecer la plantilla después de lo que me has dicho, pero las entradas que había perdido no me las ha restaurado ...
No me digas por favor que las entradas no las guarda en la copia !!!
Lo que me ha pasado es que he anulado todas las entradas correspondientes a una etiqueta concreta....
Uf, menuda paliza te estoy dando ...
Marga
No entiendo.. para eliminar entradas y todas las de una etiqueta hay que marcarlas y luego eliminarlas claro.
Para añadir este menú sólo es necesario añadir el script en la plantilla y los enlaces en un gadgets de html no hay que acceder en ningún momento a "Editar" :O
Veamos... la copia de la plantilla guarda sólo lo que es la estructura de la plantilla "el diseño"
Las entradas las tienes en el blog por eso añadimos una nueva plantilla sea la que sea y las entradas siguen estando ahí.
Otra cosa es que tengas el archivo del blog, que exportaras en algún momento el contenido de blog ¿lo tienes?
Hola Gema, por favor discúlpame todas las molestias que te estoy causando...
Lo de las entradas, no fue culpa de nada más que mía, que quise cambiar las etiquetas a todas y las anulé.
No tengo eso que me comentas, así que con paciencia volveré a hacerlas, aunque son fotografías y tampoco me va a costar mucho hacerlo, no te preocupes.
Si quieres dale un vistazo al desplegable a ver que te parece, aunque he querido centrarlo y no hay forma jejeje
Un beso
Marga
¡ Quedó estupendo!! y que bien se despleiega :)
Lo puedes centrar Marga yo no lo hice por falta de tiempo pero se puede.
La cuestión es que hay que llevar cuidado porque se debe centrar no sólo los botones sino los enlaces que se despliegan
Para centrar lo puedes hacer con:
<div ALIGN="CENTER"> aquí el contenido que centramos </div>
Para no estropearlo probando añádelo a tu blog de pruebas y así pruebas tranquilamente :)
Hola!
Probe lo del menu expandible pero me queda con solo dos links cuando se expande, como hago para tener mas? probe copiando la parte del codigo donde va el nombre del sub-link y no me quedan escondidos
Si me podes ayudar te lo agradeceria muchisimo!!
Saludos
lu no he podido ver lo que tienes añadido pero en un principio es lo siguiente:
<ul id="aquí la id de class="texthidden" class="texthidden">
<li><a href="url de la página/">aquí texto visible</a></li>
Probe copiando eso, pero queda mal, los links nuevos que agrego quedan visibles.
El blog es http://polaroid2009.blogspot.com/
Gracias!!!
Lu cuando los enlaces se muestran expandidos es porque no se ha cerrado con la etiqueta </ul>
Ahora si quedo bien!
Muchas gracias por tu ayuda!!!!!!
Saludos
Me alegra mucho Lu, esa última etiqueta es muy importante para que recoja el menú :)
Como se cual es la url para poner en el menú documentos de mis archivos o de mis entradas. Creo que no me expliqué muy bien, porque como son muy novata todavía no domino el vocabulario. Yo tengo un documento que hize yo y lo tengo guardado, entonces como sé cual es su url para ponerla en el menú.
Gracias.
yz admi para obtener una url hay que subir el archivo a un alojamiento, una vez tenemos el archivo alojado nos proporciona la url que es lo que necesitamos para añadir al enlace del menú.
Hay muchos servicios e alojamiento gratuitos, depende el tipo de archivo puede servirte uno u otro.
Hola gema
tengo una pregunta, he estado probando el menu y me parece bastante interesante y funcional si uno tiene varios links dentro de una categoria, sin embargo me he percatado de algo cuando uno espande X categoria y le da click a un link de esa categoria esta se abre en una ventana nueva. entonces, como se haria para que se abriera en la misma ventana.
Gracias de antemano
HOLA GEM@ NO SE NI ESTE MENSAJE QUIERE SALIR PUSE ESTE MENU ANDA PERO A LA HORA DE LOS ENLACES PASA QUE SALE UN CARTEL QUE DICE QUE LAS PAGINAS NO EXISTEN Y YO LAS VEO POR EL ARCHIVO DE FECHAS DESDE YA GRACIAS POR TU AYUDA
http://argentinajolie.blogspot.com/2008_08_25_archive.html :D
yz Saludos Ydalbi tendría que ver online eso que comentas, pero en un principio si se abre en ventana aparte es porque se trata de un enlace externo. Para saber donde está el error tengo que verlo online :)
yz SONIA G FERNANDEZ he accedido a tu blog y comprobado algunos enlaces que se ven perfectamente, no veo páginas que no existen. ¿Puedes indicarme un sitio en concreto?
Hola gema, aqui te dejo el link del blog
http://eromangas.blogspot.com/
gracias de antemano
yz Ydalbi tienes añadido target="_blank" en los enlaces eso hace abra en ventana nueva, simplemente eliminando eso abrirá en la misma ventana ;)
ok muchas gracias gema
yz No hay de qué Ydalbi :)
Hola Gem@ :)
Me he basado en el truco de esta entrada para hacer la presentación de las redes sociales pero que no se vieran los iconos... sino que se vieran dos o tres... (blog, bookmarking, correo) y al darle a esos enlaces... aparecieran los iconos correspondientes (al darle blog, que aparezca el icono de blogger, wordpres... etc...
al hacerlo en un elemento html no he tenido problema... pero, cuando he ido a añadirlo a la plantilla en el footer de la entrada... el truco no funciona... al darle clik sobre esas palabras no se abre nada :(
Me parece raro que no funcione... seguro es una tontería lo que pasa, pero llevo tanto tiempo subieron urls de sitios y de imagenes de los iconos que no pillo nada, jeje
Saludos
al final no conseguí que funcione al incluirlo en la plantilla :(
yz Uve no veo en ningún blog ese texto añadido :(
te paso la dire de uno en el que lo implementé ayer :)
http://relatopides.blogspot.com
Lo tengo al final de las entradas... en un elemento html que añadí debajo. En ese blog no queda mal del todo porque solo publica una entrada en la página principal...
y ahora me voy a mirar otra entrada :) a ver si encuentro algo para añadir en la zona de comentarios esos simbolitos que añades tan majos... que no me gusta mucho dejar una respuesta en cada comentario, y así queda más ordenado con la imagen :)
Saludos :)
Hola! he puesto el menu pero no me sale desplegable. Me aparecen los botones y debajo de cada uno los temas q deberian estar escondidos en los botones. A ver si puedes aydarme.
Gema hola antes que nada. En cuanto a la consulta quería saber si a un botón se le podia sacar la opción de desplegarce osea tengo el primer botón del menu que es inicio y no quiero que se despliegue que al clikear en la imagen del botón vaya directamente a la url de mi blog. Si me lo puedes solucionar te lo agradecería mucho.
Gracias.
yz Gonzalo eso lo puedes hacer configurando ese botón de la siguiente forma:
<a href="url-de-la-página-a-enlazar"><img src="url-de-la-imagen-del-botón"></a>
yz Smile eso ocurre cuando no se cierra con la etiqueta </ul> repasa el código y verás que es eso
Buenos días Gema !!!
Llevo ya tiempo con este menú y funciona perfectamente pero desde ayer me hace "algo raro".
No hay forma de poner al final < /ul>, bueno mejor dicho, lo pongo pero cuando voy a ver el blog no me recoge los enlaces. Voy de nuevo a ver el html y no está !!!!
Sabes que puede ser ???
Gracias !!!
Hola Gema, he estado probando de nuevo y me seguía pasando lo mismo.Es curioso porque me pasa cuando he querido poner otro menu aparte de recetas en otro widget y entonces el "antiguo" no se desplegaba .... Puede ser que "acoplen" ámbos ???
Bueno, de momento lo he dejado como estaba.
Un beso
Marga
yz Marga a los dos menús no puedes añadirles la misma clase, es decir donde a uno le llamas class="texthidden tendrías que añadirle otro nombre pongamos por ejemplo class="texthidden2
Eso quiere decir que debes cambiar la clase al uno de los dos tanto en la parte de enlaces como en los estilos que añadimos antes de head.
Gracias por la respuesta Gema.
yz No hay de qué Gonzalo, cualquier duda házmelo saber ;)
Muchísimas gracias Gema !!!
Lo haré así y te informaré del resultado.
Y otra cosita, recibiste el mail que te pasé con una duda de la nueva plantilla ??
Miles y miles de gracias !!!
Marga
Gema soy yo nuevamente ahi algina forma de sacarle los items (puntitos adelante de la palabra).
Gracias.
Hola Gemma!
Estupendo blog y estupendo menu! Sólo una cuestión. Podría hacerse que, una vez desplegado un sub-menú, cuando cliquemos un segundo sub-menú se cierre el que ya teníamos desplegado?
Gracias por adelantado!
David
:: Saludos Robophobia lo más parecido a eso es este menú de %% jQuery :S
Gracias por la rápida contestación! Buscaba algo más sencillo pero me lo apunto!
Nos vemos!
:: Suerte :)
Hola! GRACIAS por toda la información q brindas: me es muy útil.
Como puedo hacer para cambier el color del menú?
Un cordial saludo.
Juan
:: Saludos Juan Antonio Currado, el menú se compone de imágenes tipo botón, no es un color de fondo que se pueda cambiar, puedes ver en el siguiente enlace una página donde crear esas imágenes como la de mi ejemplo:
http://www.buttonator.com/
Hola Gem@, te felicito por tu Blog, está genial y de mucha ayuda. Lei tu post y es algo que he estado buscando desde hace días, pero mi pregunta es, cómo la aplicas para la sección Archivos? Me podrías explicar por favor? Estoy haciendo un blog para un amigo y esto de los desplegables me tiene loca, logré hacer que se desplegaran los demas gadgets pero con Archivos no pude, te envio la url del blog para que lo mires. Y lo que mas rabia me da es que sospecho que es algo muy sencillo, pero simplemente ya no lo veo. Gracias
http://noespunkdesign.blogspot.com
:: Hola Lisette, en realidad este menú es ideal si se trata de enlazar páginas externas porque para enlazar se hace necesario copiar la url que aparece en la barra del navegador y los archivos muestran la url una vez marcamos sobre una entrada concreta.
Hay otra forma y muy atractiva de desplegar "cualquier gadget" si te fijas en mis archivos está aplicada y en la parte de Directorios.
Si quieres puedes ver como hacerlo aquí:
http://gemablog-.blogspot.com/2009/02/efecto-deslizante-en-los-archivos-de-la.html
:: Perdón Lisette me confundí de enlace era este el que quería dejarte:
http://gemablog-.blogspot.com/2009/10/efecto-toggle-en-los-gadgets-de-la.html
Gracias Gem@, hermosos efectos...lo voy a probar y despues te cuento si me funciono...un millón de gracias por tu atención.
Que va Gem@...debe ser que estoy burrisima :'( pero no consigo donde poner los códigos, porque mi plantilla no es exactamente como la que pones en el ejemplo y me perdí. Será mucho pedir que lo revises??? :$
http://noespunkdesign.blogspot.com/
y disculpame por favor!!!
:: Hablamos ahora del efecto que hay en el enlace que te he dejado ¿verdad? sería mejor seguir el hilo de la conversación en la misma entrada que habla del tema para no confundirse.
De todas formas en esa entrada dice que hay que marcar para expandir la plantilla de artilugios ¿lo hiciste?
Si, lo hice... te explico mejor...y disculpa que te haya escrito aqui. El problema está que el código en mi blog no es igual al que muestras en tu ejemplo por lo tanto no logro identificar donde colocar las líneas que producen el efecto. El script lo ubique sin problemas antes del /head. Pero la línea donde se indica el efecto no se donde iria en la seccion Archivos ni donde hacer el cierre del /div.
:: ¿Qué plantilla estás usando Lisette? es que no veo los créditos de la plantilla en ningún sitio :S
Tomé la plantilla Minima y le hice las modificaciones :S
:: Lisette mándame si quieres el archivo de la plantilla y mañana en un momento la miro ;)
Hola de nuevo, Gema:
Mira no se donde comentar esto, he estado buscando en el blog pero no he encontrado lo que busco. Quiero poner dos imagenes en una misma linea en el Sidebar (en un gadget), para poner en cada una un link.
Poner el link es facil, pero no consigo poner las imagenes en linea.
En fin, si me puedes ayudar te lo agradeceria mucho, porque no encuentro respuesta.
Un saludo
:: lomaja más o menos sería algo así sólo que con dos imágenes:
http://gemablog-.blogspot.com/2009/05/banners-de-125-x-125-en-la-sidebar.html
:: Recibida la plantilla Lisette ;)
Hola Gema, como estuvo tu fin de semana??? Espero que bien y descansado para que puedas seguir lidiando con nosotros :D ... cuentame, como te ha ido con mi plantilla?? pudiste encontrarle la vuelta?? Gracias
Hola Gema,
Instalé el menú en mi blog y se ve bien en FireFox y Opera, pero al abrirlo en IE tan solo se ven las imágenes pero no se despliega el menu
¿Qué crees q sea?
No hay nadie q se queje de esto así que no sé que podría ser.
Saludos,
:: Camino Ninja ¿tienes actualizado el navegador?
Hola Gema. Me gusta tu post. pero he buscado aplicar un menu despelgable pero en una entrada de blog para enlazar algunos documentos con el formato que sugieres pero no he podido. la verdad no se nada de codigos ni nada de eso espero que me ayudes con algún código que pueda ser incluido en un a entrada en nuestro blog. la dirección es la siguiente: http://educacionespecialzona03.blogspot.com. gracias por tu atención
:: Educación Especial Salina Cruz, para una entrada lo más sencillo y eficaz es lo que puede ver en la siguiente entrada:
http://gemablog-.blogspot.com/2008/12/mtodo-sencillo-de-expandir-recoger.html
Gem, eres un amor de amores. Me fue muy fácil realizar esto y ve que soy medio patoza para cosas de la computadora. Gracias por dedicar tu tiempo a darnos consejos como estos. Sigue así por favor. Besos desde México!!!
:: Gracias a ti por comentar Nataly :D
Holaaa!! Es genial el menú, realmente muy bueno n.n sólo tengo una duda, se puede que cada imagen pueda vislumbrar y contener más de un sólo link ??? o.o
:: Así es Kelly , para añadir enlaces se deben añadir como <a href="....
Hola, me encanto el menu, pero ¿como puedo hacer para que al darle click al enlace no abra una nueva pagina, sino que se cargue en la misma?
:: Hola Sofía eso se soluciona suprimiendo el target="_blank" de los enlaces:
<ul id="Actualidad" class="texthidden">
<li><a href="http://www.20minutos.es/ " target="_blank"> 20 Minutos
</a></li></ul>
Hola Gema. Por fin he podido hacer un desplegable (en una prueba) pero me gustaria hacerlo en horizontal. En un comentario has direccionado a una explicación de menú horizontal pero estàtico. ¿No se podria hacer desplegable también?
Gracias por todas tus expliciones. Son muy útiles para un negado como yo
:: De esta forma no Alfred, hay menús que al pasar el cursor tienen el efecto desplegable pero no de esta forma, te dejo un enlace que veas lo que trato de decir:
http://vagabundia.blogspot.com/2010/02/menu-desplegable-con-css3.html
Genial!!! es lo que buscava. Pero... hay un pequeño problemilla.
Antes de ponerlo en el blog, hago pruebas en otro que he creado http://emuzcar.blogspot.com/
y como puedes ver los desplegables quedan tapados por la entrada (y los títulos de las pestañas en parentesis ¿¿??).
En cambio si lo pongo abajo del todo queda perfecto, tal como tiene que quedar.
:: No tengo idea Alfred estás usando una de las nuevas plantillas y desconozco donde tocar para solucionarlo :S
Hola Gema!! Que le vamos ha hacer. Seguiré buscando y probando cosas y si encuentro alguna cosa te lo digo, aunque no domino el tema.
Por cierto, yo soy Jaume (perdona que no te lo dijese). Alfred es quien tiene las malas ideas y yo el machaca que intenta hacerlas.
Gracias por todo.
Hola de nuevo Gema!! Ya he conseguido algo positivo. Lo puedes mirar tu misma: http://emuzcar.blogspot.com/2011/02/presentacio.html
El truco estava que yo queria ponerlo en toda la línia, y resulta que (no sé por què) tiene que estar justo encima de las entradas.
Ahora tenemos un nuevo problema. Cuando se despliega el menú se transparenta viendose la entrada de abajo. ¿Sabrías como hacer para que el menú fuera perfectamente visible? Vaya, que el menú desplegable fuera opaco.
De nuevo gracias.
:: Jaume se transparenta porque te falta añadir las imágenes donde dice URL_gradient.png (son tres veces la misma imagen)
Gema, ¿donde consigo esa imagen? No entiendo como no está en el código.
De nuevo muchas gracias.
:: Pues lo que veo es una imagen blanca, la url es esta:
http://2.bp.blogspot.com/_hljKDuw-cxQ/S4WOl6AHg9I/AAAAAAAAPK4/CTNvGheNF9M/s00/gradient.png
Guárdala en tu PC y súbela a Blogger para respetar la imagen de otros ok?
Uhmmmmm, pues esto también me lo tendràs que explicar o direccionarme a algun sitio.
Ostras, ya no sé como darte las gracias con lo que estas haciendo.
:: Veamos, copias la dirección de la imagen que te he añadido y la pegas en la barra del navegador.
Cuando la visualices la guardas en tu ordenador y luego la subes en una entrada cualquiera que puedes dejar en borrador, desde la misma entrada pero en edición html copias la url de la imagen y la pegas en los estilos de tu menú donde dice algo así como url imagen gradient.png
Hecho y... no funciona. Sigue en transparente.
Hola Gema!!
Vagabundia me ha solucionado el problema. Resulta que tenia que añadir en el código (detrás de "position: relative;")"z-index:1000;"
Ahora ya funciona.
El próximo paso será ponerlo en el otro blog.
Gracias por todo
:: He seguido el hilo de la conversación y coincidimos en opiniones respecto a las nuevas plantillas :)
Tienes por algun sitio la explicación de como añadir el boton TOP que tienes abajo a la derecha?
Lo encuentro muy útil.
:: En realidad no es una imagen emu es un efecto conseguido con CSS :)
http://gemablog-.blogspot.com/2011/03/seguimos-subiendo.html
Hola de nuevo Gema.
¿Se podria hacer en este desplegable que comentas que se abriera el menú sin hacer clic, sólo con pasar el ratón por encima? ¿O es muy complicado?
Bueeeeno!!! Después de muchas horas y probando cosas he conseguido dicho botón desplegable.
Te he mandado un email con los códigos que he usado.
Gracias por toda tu ayuda y tu paciencia.
Jaume (o Emu)
:: He visto tu mail Alfred i Jaume, y conforme te leía recorde que tengo algo parecido en la sidebar de este blog:
http://forevergema.blogspot.com/
Me alegra esté resuelto :)
funciona bien en los nevegadores excepto en Internet Explorer, pues en este ultimo se queda detrás de las entradas. Veo que en el comentario 148 "Alfred i Jaume" dice tener la solucion pero no la explica. Por favor tu me podrías aclarar como hacer para que el menú se vea bien en IE. mi blog de prueba es http://pvillegasy,blogspot.com
Gracias
:: No puedo ver ese ejemplo Peter :S
excelente señorita Gem@.
ay algo que no entiendo y es lo primero cuando le doy en edicion html me sale un monton de letras eso lo tengo que borrar??????????? y otra cosa es verdad que para crear el menu desplegable tengo que crear otro blog para enlazarlo porque lo que yo quiero es que se enlace con mi mismo blog?? si me explicas me seras de mucha ayuda
:: Gracias LuiS :)
:: maxwell no sé queletras te salen tendría que verlo añadido en tu blog o en otro de pruebas eso es indiferente pero verlo funcionando.
No es necesario crear otro blog es un menú como otro cualquiera, lo que si es necesario que lo que deseas enlazar tenga url para añadir que será lo que nos llevará a ese sitio dentro o fuera del blog.
Gema, muchas cosas de mi blog están hechas gracias a tus enseñanzas!!! Gracias :) Lo tuve bastante abandonado por un tiempo y quiero modificar/aggiornar algunas cosas. Perdón por molestarte pero quería saber cómo puedo tener un menú desplegable de etiquetas similar al de este blog: http://www.salseandoenlacocina.com/ Específicamente me interesa el menu desplegable que allí dice "Archivo del Blog" e "Indice de etiquetas" para aplicarlo al mío. Desde ya te agradezco muchísimo. Un abrazo
Hola Adriana, esos gadgets son los que vienen predeterminados en Blogger puedes añadirlos editando un nuevo gadgets en DISEÑO y escogiendo el de archivos o etiquetas.
Si ya los tienes bastará con editar los que hay y marcar la forma de presentación que deseas Jerarquía - Lista - Menú desplegable :)
Gracias Gema. Tengo ambos gadgets instalados desde que abrí el blog. En el caso del gadget de archivos, se puede elegir menú desplegable. En el gadget de etiquetas no. De cualquier forma yo quería algo como como tienes en el tuyo donde dice "los archivos" con flechita y se despliega. Pero no hay problemas, era sólo un chiche estético que quería poner. Tal como lo tengo funciona bien. Gracias por tu tiempo en responderme. Saludos :)
Tienes mucha razón no sé como te respondí eso :S
Si como librería utilizas Prototype y Scriptaculous la siguiente entrada dice la forma de desplegar cualquier gadget:
http://www.gemablog.com/2009/10/efecto-toggle-en-los-gadgets-de-la.html
jaja, no importa!!! Mil gracias por la información y la ayuda, que termines bien tu semana :) :)
¡Hola! He buscado por todas partes y no lo he encontrado, sobre todo porque no sé cómo llamar ese "efecto". Verás, yo tengo desde hace tiempo este menú en mi blog, pero al contario que en el tuyo, al clickar en el botón, los links me aparecen de golpe. En tu menú desplegable, los links ocultos aparecen poco a poco, volviéndose visibles y ese efecto me parece muy bonito y es lo que estoy buscando.
¡Espero que puedas echarme un cable! Muchas gracias, Gema.
Hola Norae, he visitado tu perfil pero en el blog que se muestra no localizo tu menú. De todas formas por si te sirve de algo ese eefcto que comentas es lo más parecido a una transición
Mira la siguiente entrada de Vagabundia porque creo que es lo que deseas hacer.
http://vagabundia.blogspot.com/2011/03/introduccion-las-transiciones-con-css.html
Nota: solo los miembros de este blog pueden publicar comentarios.